<style lang="less">
  .ue-truck-bellwether-income {
    .search-bar{
      height: 90px;
    }
    .ue-dialog-edit{
      .item-width{
        width: 80%;
      }
    }
  }
</style>
<!--精品线路列表-->
<template>
  <section class="ue-truck-bellwether-income">
    <!--工具条-->
    <search-bar>
      <el-row>
        <el-col :span="8">
          <el-form-item label="领头羊姓名">
            <el-input v-model="searchCondition.LIKE_truckBellwetherRealName"
                      placeholder="请输入领头羊姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系手机">
            <el-input v-model="searchCondition.LIKE_truckBellwetherPhone"
                      placeholder="请输入联系手机"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归属组织">
            <el-input v-model="searchCondition.LIKE_bellwetherOrganizationNames"
                      placeholder="请输入归属组织"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <!-- 操作 -->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="resetSearchCondition" style="float: right">重置</el-button>
      <el-button type="primary" @click="searchTableList" style="float: right;margin-right: 10px">查询</el-button>
      <!--<el-button type="primary" @click="searchTableList" style="float: right">导出</el-button>-->
    </el-col>
    <!--列表-->
    <el-table :data="tableData" highlight-current-row border @sort-change="sortChange" max-height="660"
              show-summary
              :summary-method="getSummaries"
              @selection-change="selsChange" v-loading="listLoading" style="width: 100%;">
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="truckBellwetherRealName" label="领头羊姓名" width="100" align="center">
      </el-table-column>
      <el-table-column prop="truckBellwetherPhone" label="联系手机" width="120" align="center">
      </el-table-column>
      <el-table-column prop="bellwetherOrganizationNames" label="归属组织" width="200">
      </el-table-column>
      <el-table-column prop="totalOrderNum" label="总订单数(票)" width="120" align="center">
      </el-table-column>
      <el-table-column prop="freightAmt" label="运费总额(元)" width="120" align="center">
      </el-table-column>
      <el-table-column prop="totalIncome" label="收益总额(元)" width="120" align="center">
      </el-table-column>
      <el-table-column prop="totalWithdrawal" label="已销账金额(元)" width="120" align="center">
      </el-table-column>
      <el-table-column prop="avauseAmt" label="可销账金额(元)" width="120" align="center">
      </el-table-column>
      <el-table-column prop="freezeAmt" label="不可销账金额(元)" width="120" align="center">
      </el-table-column>
      <el-table-column prop="hangUp" label="挂账金额(元)" width="120" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="300" align="center">
        <template slot-scope="scope">
          <el-button   type="primary" @click="detailsView(scope.row)">收益明细</el-button>
          <el-button   type="primary" @click="toChargeOffsList(scope.row.truckBellwetherId)">销账记录</el-button>
          <el-button  type="primary" @click="toChargeOffs(scope.row.truckBellwetherId, scope.row.truckBellwetherRealName)">销账</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <!--销账记录-->
    <truck-bellwether-income-charge-offs-list ref="TruckBellwetherIncomeChargeOffsList" :load-data="loadChargeOffsLogs" @viewImg="viewImg"></truck-bellwether-income-charge-offs-list>
    <!--销账-->
    <truck-bellwether-income-charge-offs ref="TruckBellwetherIncomeChargeOffs" @comfirmSuccess="chargeOffsComfirmSuccess"></truck-bellwether-income-charge-offs>
    <!--图片-->
    <view-img ref="viewImg"></view-img>
  </section>
</template>

<script>
import {
  searchTruckBellwetherAcctList } from '../../../api/v3/TruckLoadProfit';
import { resetObjNull } from '../../../lib/util';
import TruckBellwetherIncomeChargeOffsList from './TruckBellwetherIncomeChargeOffsList.vue';
import TruckBellwetherIncomeChargeOffs from './TruckBellwetherIncomeChargeOffs.vue';
import ViewImg from './ViewImg.vue';
export default {
  components: {
    TruckBellwetherIncomeChargeOffsList,
    TruckBellwetherIncomeChargeOffs,
    ViewImg
  },
  data () {
    return {
      searchCondition: {
        'LIKE_truckBellwetherRealName': null,
        'LIKE_truckBellwetherPhone': null,
        'LIKE_bellwetherOrganizationNames': null
      },
      sels: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: 'createdDate',
      sortOrder: 'descending',
      listLoading: false,

      loadChargeOffsLogs: searchTruckBellwetherAcctList

    };
  },
  methods: {
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        let columnProperty = column.property;
        if (columnProperty === 'totalOrderNum' || columnProperty === 'freightAmt' || columnProperty === 'totalIncome' ||
            columnProperty === 'totalWithdrawal' || columnProperty === 'avauseAmt' || columnProperty === 'hangUp' || columnProperty === 'freezeAmt') {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            if (columnProperty === 'totalOrderNum') {
              sums[index] += ' 票';
            } else {
              sums[index] = sums[index].toFixed(2);
              sums[index] += ' 元';
            };
          } else {
            sums[index] = '';
          }
        }
      });
      return sums;
    },
    chargeOffsComfirmSuccess () {
      this.searchTableList();
    },
    toChargeOffsList (bellwetherId, bellwetherName) {
      this.$refs.TruckBellwetherIncomeChargeOffsList.show(bellwetherId, bellwetherName);
    },
    toChargeOffs (bellwetherId, truckBellwetherRealName) {
      this.$refs.TruckBellwetherIncomeChargeOffs.show(bellwetherId, truckBellwetherRealName);
    },
    viewImg (headerUrl, val) {
      this.$refs.viewImg.show(val.split(';').map(o => headerUrl + o));
    },
    // 跳转收益明细列表
    detailsView (row) {
      this.$router.push('/settlement_platform/truck_bellwether_income_detail/' + row.truckBellwetherId);
    },
    // 列表相关
    // 多选操作
    selsChange (sels) {
      this.sels = sels;
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.searchTableList();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTableList();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTableList();
    },
    // 重置查询条件
    resetSearchCondition () {
      resetObjNull(this.searchCondition);
    },
    // 查询列表执行
    loadingLists (filter = '') {
      this.listLoading = true;
      searchTruckBellwetherAcctList({
        filters: filter,
        size: this.pageSize,
        page: this.currentPage - 1,
        sort: this.sortProp === null ? 'createdDate,desc' : (this.sortProp + (this.sortOrder === 'ascending' ? ',asc' : ',desc'))
      }).then(res => {
        this.tableData = res.data;
        this.total = Number(res.headers['x-total-count']);
        this.listLoading = false;
      });
    },
    // 查询调用
    searchTableList () {
      // let filters = objToFilter(this.searchCondition);
      let filters = '';
      if (this.searchCondition.LIKE_truckBellwetherRealName) {
        filters += ';LIKE_truckBellwether.realName=' + this.searchCondition.LIKE_truckBellwetherRealName;
      };
      if (this.searchCondition.LIKE_truckBellwetherPhone) {
        filters += ';LIKE_truckBellwether.phone=' + this.searchCondition.LIKE_truckBellwetherPhone;
      };
      if (this.searchCondition.LIKE_bellwetherOrganizationNames) {
        filters += ';LIKE_truckBellwether.bellwetherOrganizationNames=' + this.searchCondition.LIKE_truckBellwetherOrganizationName;
      };
      filters += ';GT_totalIncome=0';
      this.loadingLists(filters);
    }
  },
  mounted () {
    this.searchTableList();
  }
};
</script>
